<template>
	<view class="logo-page">
		<view class="login-box">
			<view class="logo">
				<image src="/static/pic/movie.png" mode="widthFix"></image>
				<text>豆瓣电影</text>
			</view>
			<view class="wrap">
				<form >
					<view class="input-group">
						<view class="titles">用户名</view>
						<input class="uni-inputs" type="text" placeholder="请输入用户名" :value="name" />
					</view>
					<view class="input-group">
						<view class="titles">密码</view>
						<input class="uni-inputs" password type="password" placeholder="请密码输入密码" :value="pwd" />
					</view>
					<view class="input-group">
						<button class="login-btn" @tap="login">登录</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '张冬梅',
				pwd: 123456
			}
		},
		methods: {
			login: function() {
				uni.setStorage({
					key: 'apikey',
					data: '0b2bdeda43b5688921839c8ecb20399b'
				});
				if (this.name =='张冬梅'&&this.pwd==123456) {
					uni.showToast({
						title: '登录成功；'
					});
					uni.redirectTo({
						url: '../index/index'
					})
				} 
				// uni.clearStorage()
				
			}
		}
	}
</script>

<style>
	page{
		height: 100%;	
	}
	.logo-page{
		height: 100%;
		background: url() no-repeat center;
		background-size: cover;
	}
	.logo{
		padding: 120upx 0 90upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		white-space: normal;
	}
	.logo image{
		display: block;
		width: 110upx;
	}
	.logo text{
		display: block;
		padding: 20upx 0;
		color: #fff;
		font-size: 36upx;
	}
	.input-group{
		padding: 18upx 0;
	}
	.titles{
		display: none;
	}
	.input-group input{
		border-bottom: 1px solid #888;
		color: #444;
		text-align: center;
		padding: 16upx 10upx;
		font-size: 26upx;
		color: #fff;
	}
	.login-btn{
		display: block;
		margin-top: 80upx;
		height: 90upx;
		line-height: 90upx;
		background-color: #2B9939;
		color: #eee;
	}
</style>
